---
const { add, del } = Astro.props;
const content = await Astro.slots.render('default');

const addStyles = {
  statusColor: 'dark:before:bg-green-900 before:bg-green-300',
  borderColor: 'before:border-green-600',
  contentColor: 'before:text-green-600',
  plusOrMinus: 'before:content-["+"]'
}

const delStyles = {
  statusColor: 'dark:before:bg-red-900 before:bg-red-300',
  borderColor: 'before:border-red-600',
  contentColor: 'before:text-red-600',
  plusOrMinus: 'before:content-["-"]'
}

if (!add && !del) {
  throw new Error('You must provide either `add` or `del` prop');
}

const styles = add ? addStyles : delStyles;
---

<div class:list={[
  "inline-block before:block before:border-l-2 before:pl-1 dark:before:mix-blend-lighten before:mix-blend-multiply",
  "before:flex before:items-center",
  "before:absolute before:left-0 before:right-0 before:h-[24.75px]",
  styles.statusColor,
  styles.contentColor,
  styles.borderColor,
  styles.plusOrMinus,
]}>
    <span set:html={content} />
</div>
